<template>
	<view class="gra">
		<view class="grade">
			<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/othertwo/gradebanner.png" mode="widthFix"></image>
			<!-- 列表 -->
			<view class="grade_card" v-if="gradeList.length > 0">
				<view class="list scroll-view-item" v-for="(item, index) in gradeList" :key="index">
					<view class="pic"><image :src="'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/' + item.cover" mode=""></image></view>
					<view class="right">
						<view class="title">{{ item.active_name }}</view>
						<view class="group">{{ item.team_name }}</view>
						<view class="right_bot">
							<view class="gra">成绩：{{ item.grade }}</view>
							<view class="look" @click="tocertificate(item)">
								<i class="icon">&#xe60d;</i>
								查看证书>>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 没有成绩列表-->
			<view class="nojoin_active" v-else>
				<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/index/nodata.png" mode=""></image>
				<view class="nojoin_wz">您还没有报名任何活动哦，快去报名吧！</view>
				<view class="tohome" @tap="sing_active">报名活动</view>
			</view>
		</view>
		<!-- loading 遮罩层 -->
		<loading v-if="loadflag"></loading>
		<navigation></navigation>
	</view>
</template>

<script>
import loading from '@/components/loading/loading.vue';
import navigation from '@/components/navigation/navigation.vue';
export default {
	components: { loading, navigation },
	data() {
		return {
			loadflag: true,
			list: [],
			gradeList: []
		};
	},
	mounted() {
		this.getgrade();
	},
	methods: {
		// 获取成绩列表
		getgrade() {
			this.ajax('active/getUserMatch', {
				success: res => {
					 // console.log (res);
					res.msg.forEach(e => {
						e.form.forEach(item => {
							if (item.name == '净成绩') {
								e.grade = item.value;
							}
						});
					});
					this.gradeList = res.msg;
					this.loadflag = false;
				}
			});
		},
		tocertificate(e) {
			var content = JSON.stringify(e);
			uni.navigateTo({
				url: '/pageA/grade/certificate?content=' + content
			});
		},
		// 去首页报名活动
		sing_active() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		}
	}
};
</script>

<style lang="less" scoped>
.grade {
	image {
		width: 100%;
		height: 100upx;
	}
	.pico {
		padding: 0 30upx;
		box-sizing: border-box;
		position: absolute;
		width: 100%;
		top: 100upx;
	}
}

.grade_card {
	width: 100%;
	padding: 0 30upx;
	box-sizing: border-box;
	.list {
		height: 176upx;
		width: 100%;
		padding: 0 15upx;
		background-color: #ffffff;
		box-sizing: border-box;
		margin-top: 20upx;
		display: flex;
		align-items: center;
		.pic {
			height: 146upx;
			image {
				height: 146upx;
				width: 260upx;
				border-radius: 10upx;
				margin-right: 20upx;
			}
		}
		.right {
			flex: 1;
			height: 146upx;
			.title {
				font-size: 28upx;
				color: #333333;
				font-weight: bold;
				margin-bottom: 10upx;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
				width: 380upx;
			}
			.group {
				font-size: 24upx;
				color: #999999;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
				width: 380upx;
			}
			.right_bot {
				display: flex;
				margin-top: 30upx;
				justify-content: space-between;
			}
			.gra {
				flex: 1;
				font-size: 24upx;
				color: #8938d3;
			}
			.look {
				font-size: 24upx;
				color: #989898;
				display: flex;
				align-items: center;
				.icon {
					font-size: 24upx;
					margin-right: 4upx;
				}
			}
		}
	}
	.list:last-child {
		border-bottom: 0;
	}
}
.nojoin_active {
	width: 100%;
	text-align: center;
	padding-top: 200upx;
	box-sizing: border-box;
	image {
		width: 240upx;
		height: 210upx;
	}
	.nojoin_wz {
		font-size: 28upx;
		color: #999999;
		line-height: 100upx;
	}
	.tohome {
		width: 300upx;
		height: 68upx;
		font-size: 32upx;
		color: #ffffff;
		text-align: center;
		line-height: 68upx;
		border-radius: 34upx;
		margin: auto;
		background: linear-gradient(to right, #8838d2 0%, #bb78f9 100%);
	}
}
scroll-view {
	height: 760upx;
	overflow: hidden;
}
</style>
